<template>
    <div class="new">
    <div class="newBox">
     <ul>
     <li>
     <dt class="title">客户服务</dt>
     
    <p>
     <span> 
     <van-icon name="comment-o" :size="36"/>
     <dt>在线客服</dt>
     </span>
      <span> 
      <van-icon name="balance-list-o" :size="36" />
       <dt>问题反馈</dt>
      </span>
    </p>

     
     
     </li>
       <li>
     <dt class="title">关注我们</dt>
     
    <p>
     <span> 
     <van-icon name="flower-o" :size="36"/>
     <dt>公众号</dt>
     </span>
      <span> 
      <van-icon name="newspaper-o" :size="36" />
       <dt>微博</dt>
      </span>
    </p>

     
     
     </li>
      <li>
     <dt class="title">服务热线</dt>
     
    <p>
     <span> 
     <van-icon name="manager-o" :size="36" />
     <dt>在线客服</dt>
     </span>
      <span> 
      <van-icon name="delete-o" :size="36"/>
       <dt>在线客服</dt>
      </span>
    </p>

     
     
     </li>
     <li>
     <dt class="title">服务热线</dt>
     
    <p>
     <span> 
    <van-icon name="apps-o" :size="36"/>
     <dt>在线客服</dt>
     </span>
      <span> 
     <van-icon name="edit" :size="36"/>
       <dt>在线客服</dt>
      </span>
    </p>

     
     
     </li>
     </ul>
    </div>
    </div>
</template>

<script>
export default {
    setup () {
        

        return {}
    }
}
</script>

<style lang="less" scoped>
.newBox{
   width: 1240px;
   background-color: #fff;
   margin: 0 auto;
   height: 290px;

}
ul{
      height: 100%;
      justify-content: space-between;
    padding: 60px 0 40px 25px ;
    display: flex;
    align-items: center;
}
li{
    display: flex;
    height: 100%;
    width: 260px;
     padding: 0 72px 0 0 ;
     	flex-direction: column;
	/*设置主轴上子元素水平居中,此时主轴是垂直方向*/
	justify-content: center;
	/*设置侧轴上子元素居中,此时侧轴是水平方向*/
	align-items: center;
}
span{
    width: 88px;
    height: 88px;
    text-align: center;
    display: inline-block;
    padding: 10px;
    border:  1px #999 solid;
    margin-left: 10px;
    margin-top: 20px;
    dt{
      
        padding: 5px ;
         color: #999;
    }
    
}
p>span:nth-child(1){
    margin-left: 0;
}
.title{
    font-size: 18px;
    color: #999;
}
</style>